<template>
  <div>
    <section>
      <v-layout class="my-5" column>
        <v-flex>
        <v-layout row wrap>
          <v-flex xs12 sm6>
            <v-img :src="goodsData.cover || '/static/img/demo/carousel_1.jpg'" height='500' ></v-img>
          </v-flex>
          <v-flex xs12 sm6 class="pl-5">
            <p class="display-1">
              {{goodsData.goods_name}}
            </p>
            <p>{{goodsData.goods_intro}}</p>
            <p><v-chip color="primary" outlined>官方自营</v-chip></p>
            <p class="primary lighten-1 white--text mb-0 pa-1 pl-3" style="height:2rem">本站价格</p>
            <p class="title grey lighten-2 py-1 px-3 primary--text "  style="height:3rem">
              <span class="headline"><b>{{goodsData.price}}</b></span>元
              <s class="black--text subheading ml-3">{{goodsData.market_price}}元</s>
            </p>
            <v-layout justify-space-between class="my-3">
              <v-flex><span>销量：<b class="primary--text">{{goodsData.sales_num || 10}}</b></span></v-flex>
              <v-flex><v-divider vertical></v-divider></v-flex>
              <v-flex><span>点击量：<b class="primary--text">{{goodsData.click_count}}</b></span></v-flex>
              <v-flex><v-divider vertical></v-divider></v-flex>
              <v-flex><span>评论数：<b class="primary--text">3</b></span></v-flex>
            </v-layout>
            <v-btn large class="primary ml-0" style="width:14rem;height:4rem;" @click="onBtnBuynow">立即购买</v-btn>
            <v-btn large class="ml-0" style="width:10rem;height:4rem;" outlined :to="{ name: 'AddToCart', params: { goods_id: id } }">加入购物车</v-btn>
            <v-btn large style="width:10rem;height:4rem;" @click="liked = !liked">
              <template v-if="liked">
                <v-icon class="primary--text">favorite</v-icon>已收藏
              </template>
              <template v-else>
                <v-icon class="primary--text">favorite_border</v-icon>收藏
              </template>
            </v-btn>
            <p class="mt-3">
              <v-chip @click="$router.push({ name: 'ShopList'})" class="" label small outlined v-for="(item,index) in goodsData.keywords" :key="index" color="primary" text-color="">{{item}}</v-chip>
            </p>
            </v-flex>
          </v-layout>
        </v-flex>
        <v-flex class="mt-5">
          <div  v-html="goodsData.goods_content"></div>
        </v-flex>
      </v-layout>
    </section>
  </div>
</template>
<script>
import { fetchDetailByID } from '@/api/shop/goods'
import { add as AddToCartAPI } from '@/api/shop/shopCart.js'
// import ShopHeader from '@/apps/www/Layout/components/ShopHeader.vue'
export default {
  name: 'ShopDetail',
  // components: { ShopHeader },
  props: {
    id: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      goodsData: {},
      liked: false
    }
  },
  created: function () {
    this.fetchGoodsData()
  },
  methods: {
    fetchGoodsData: function () {
      fetchDetailByID(this.id).then(res => {
        // console.log(res)
        this.goodsData = res.data
      })
    },
    onBtnBuynow: function () {
      AddToCartAPI(this.goodsData.goods_id, 1).then(res => {
        this.$router.push({ name: 'OrderSubmit', query: { selected: res.data } })
      }).catch(err => {
        alert(err.response.daa)
      })
    }
  }
}
</script>
<style>
</style>
